<!-- 天气 -->
<template>
	<view class="content">
		<view class="heard">
			<view class="h_bgImg">
				<image :src="imgUlr[0]" mode=""></image>
			</view>
			<view class="textContent">
				<!-- 当前气温 -->
				<view class="nowTemperature">
					{{weather.now}}°
				</view>
				<!-- 当天气温 -->
				<view class="dayTemperature">
					<text>16°/24°</text>
					<text class="temperature">晴\n</text>
					<text class="week">星期四</text>
				</view>
			</view>
			<view class="h_topBg"></view>
		</view>
		<view class="main">
			<!--时间/日期 -->
			<view class="option">
				<view :class="['time', option == 'time' ? 'activate':'']" @click="chengeOption('time')">
					时间
				</view>
				<view :class="['date', option == 'date' ? 'activate':'']" @click="chengeOption('date')">
					日期
				</view>
			</view>
			<view class="timeList" v-if="option == 'time'">
				<block v-for="item in weather.times" :key="item">
					<view class="row">
						<view class="">
							{{item.time}}
						</view>
						<view class="">
							{{item.weather}}
						</view>
						<view class="">
							<text :class="['iconfont',showIcon(item.weather)]"></text>
							<text>{{item.temperature}}°</text>
						</view>
					</view>
				</block>
			</view>
			<view class="dateList" v-if="option == 'date'">
				<view class="">
					近一周天气
				</view>
				<view class="row">
					<view class="">
						日期
					</view>
					<view class="">
						最高温
					</view>
					<view class="">
						最低温
					</view>
					<view class="">
						天气
					</view>
				</view>
				<block v-for="item in weather.datas" :key="item">
					<view class="row">
						<view class="">
							{{item.name}}
						</view>
						<view class="">
							{{item.highest}}
						</view>
						<view class="">
							{{item.lowest}}
						</view>
						<view class="">
							{{item.weather}}
							<text :class="['iconfont',showIcon(item.weather)]"></text>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUlr: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2F1g%2Fm1%2FQJ6504787950.jpg%3Fx-oss-process%3Dstyle%2Fshow&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658973809&t=283d0cadbbd00692fb379b2c106bee15',
				],
				weather: {
					now: '18',
					times:[
						{time:'08:00',weather:'晴',temperature:'18'},
						{time:'09:00',weather:'雨',temperature:'15'},
						{time:'10:00',weather:'雨',temperature:'14'},
						{time:'12:00',weather:'阴',temperature:'17'},
						{time:'13:00',weather:'晴',temperature:'18'},
						{time:'14:00',weather:'晴',temperature:'20'},
					],
					datas:[
						{name:'今天',highest:'18',lowest:'13',weather:'晴'},
						{name:'明天',highest:'20',lowest:'15',weather:'晴'},
						{name:'周六',highest:'19',lowest:'12',weather:'雨'},
						{name:'周日',highest:'23',lowest:'16',weather:'阴'},
						{name:'周一',highest:'25',lowest:'8',weather:'晴'},
						{name:'周二',highest:'19',lowest:'9',weather:'雨'},
						{name:'周三',highest:'23',lowest:'15',weather:'晴'}
					]
				},
				option:'time',
				
			}
		},
		methods:{
			chengeOption(option){
				this.option = option
			},
			showIcon(text){
				switch(text){
					case '晴': return 'icon-tianqi-qing'; break
					case '阴': return 'icon-tianqi-yintian'; break
					case '雨': return 'icon-tianqi-dayu'; break
				}
			}
		},
		computed:{
			
		},
		onLoad() {

		},
		onShow() {

		}
	}
</script>

<style lang="less">
	@import url('@/static/iconfont/iconfont.css');
	@radius: 16rpx; //圆角
	@h1: 36rpx; //大标题
	@h2: 32rpx; //二级标题
	@h3: 28rpx; //三级标题
	@text: 24rpx; //四级标题、标签、说明文字
	//颜色
	@color1: #C78748;
	@color2: #FFBF81;
	@color3: #673A19;
	@color4: #42BAE7;
	@color5: #5D9319;
	@color6: #E0593B;
	@color7: #FFF9EF;
	//间距
	@interval1: 72rpx;
	@interval2: 48rpx;
	@interval3: 32rpx;
	@interval4: 16rpx;
	
	.content{
		font-size: @h3;
		background-color: @color7;
	}
	.heard{
		position: relative;
		height: 50vh;
		.h_topBg{
			width: 750rpx;
			height: @radius;
			background-color: @color7;
			position: absolute;
			bottom: 0;
			border-radius: @radius @radius 0 0;
		}
	}
	.main{
		position: relative;
		z-index: 2;
		width: 750rpx;
		background-color: @color7;
		padding: 0 @interval3;
		box-sizing: border-box;
	}
	.h_bgImg{
		image{
			width: 750rpx;
			height: 50vh;
		}
	}
	.textContent{
		position: absolute;
		left: 0;
		bottom: @interval3;
		width: 260rpx;
		text-align: center;
		color: @color3;
		.nowTemperature{
			font-size: ceil(@h1 * 3);
		}
		.temperature{
			margin-left: 1em;
		}
		.week{
			line-height: 2;
		}
	}
	.option{
		border: @color1 1rpx solid;
		width: 200rpx;
		height: 40rpx;
		padding:5rpx;
		margin:@interval1 auto 0;
		background-color: #FFF;
		border-radius: 25rpx;
		display: flex;
		justify-content: space-between;
		.time,
		.date{
			font-size: @text;
			line-height: 40rpx;
			flex:1;
			text-align: center;
		}
		.activate{
			background-color: @color1;
			border-radius: 20rpx;
			color: #FFF;
		}
	}
	.timeList,
	.dateList{
		font-size: @h2;
		.row{
			color: @color3;
			margin-top: @interval2;
			display: flex;
			justify-content: space-between;
			view{
				text-align: center;
				flex: 1;
			}
		}
		.iconfont{
			margin-right: 1em;
		}
	}
	.dateList .row .iconfont{
		margin: 0;
	}
</style>
